import { forwardRef, useImperativeHandle, useState, useEffect } from 'react'
import MonthWorks from '../month-works'
import { getMouthRange } from 'packages/shared/utils/utils'
import { Cascader, DatePicker, Spin, TreeSelect, type CascaderProps, type DatePickerProps } from 'antd'
import dayjs, { Dayjs } from 'dayjs'
import './index.css'

export interface ModelTimesProps {
    [x: string]: any
}
export interface ModelTimesRef {
    load: (value: any[]) => void
}

const weekFormat = 'M/D'
const treeData = [
    {
        value: 'parent 1',
        title: '测试项目1',
        children: [
            {
                value: 'parent 1-1',
                title: '测试项目1-问题1'
            },
            {
                value: 'parent 1-2',
                title: '测试项目1-问题2'
            },
            {
                value: 'parent 1-3',
                title: '测试项目1-问题3'
            },
        ]
    },
    {
        value: 'parent 2',
        title: '测试项目2',
        children: [
            {
                value: 'parent 2-1',
                title: '测试项目2-问题1'
            },
            {
                value: 'parent 2-2',
                title: '测试项目2-问题2'
            },
            {
                value: 'parent 2-3',
                title: '测试项目2-问题3'
            },
        ]
    }
]
const options: Option[] = [
    {
        value: 'project',
        label: '项目',
        children: [
            {
                value: 'person',
                label: '人员',
                children: [
                    {
                        value: 'work',
                        label: '任务',
                    },
                ],
                
            },
            {
                value: 'work',
                label: '任务',
            }
        ],
    }
]

export interface Option {
    value: string;
    label: string;
    children?: Option[];
}
const customMouthStartEndFormat: DatePickerProps['format'] = (value) =>
    `${dayjs(value).startOf('month').format(weekFormat)} ~ ${dayjs(value).endOf('month').format(weekFormat)}`
const ModelTimes = forwardRef<ModelTimesRef, ModelTimesProps>((props: ModelTimesProps, ref) => {
    const [mouthData, setMouthData] = useState<any[]>(getMouthRange())
    const [loading, setLoading] = useState(false)
    const [value, setValue] = useState<string>()

    useImperativeHandle(ref, () => {
        return {
            load: (data: any) => {
                setMouthData(getMouthRange(data.start))
            }

        }
    })
    const onChange = (newValue: string) => {
        setValue(newValue)
    }
    const onPathChange: CascaderProps<Option>['onChange'] = (value) => {
        console.log(value);
    }
    const handleMouthDateChange = (value?: Dayjs) => {
        setLoading(true)
        setTimeout(() => {
            const _value = value || dayjs()
            const start = dayjs(_value).startOf('month').format('YYYY-MM-DD')
            const end = dayjs(_value).endOf('month').format('YYYY-MM-DD')
            setMouthData(getMouthRange(start))
            setLoading(false)
        }, 1000)
    }
    useEffect(() => {
        handleMouthDateChange()
    }, [])
    return (
        <div className='month-works'>
            <div className='month-works-query'>
                <DatePicker prefix='查询日期：' defaultValue={dayjs()} format={customMouthStartEndFormat} onChange={handleMouthDateChange} picker="month" allowClear={false} />
                <TreeSelect
                    showSearch
                    prefix='任务：'
                    style={{ width: '300px', marginLeft: '20px' }}
                    value={value}
                    styles={{
                        popup: { root: { maxHeight: 400, overflow: 'auto' } },
                    }}
                    placeholder="搜索任务..."
                    allowClear
                    multiple={false}
                    treeDefaultExpandAll
                    onChange={onChange}
                    treeData={treeData}
                />
                <Cascader prefix={'分组规则：'}  style={{ width: '350px', marginLeft: '20px' }} defaultValue={['project','work']} options={options} onChange={onPathChange} />
            </div>
            <div className='month-works-body'>
                {
                    loading && <Spin size='large' style={{ position: 'absolute', zIndex: 1000, left: '50%', top: '50%' }}></Spin>
                }
                <MonthWorks mouthData={mouthData}></MonthWorks>
            </div>
        </div>
    )
})

export default ModelTimes